<template>
  <div class="register">
    <Header>注册</Header>
    <section>
        <div class="register-tel">
          <input type="text" placeholder="请输入手机号" v-model="userTel" pattern="[0-9]*">
        </div>
        <div class="register-message">
          <input type="text" v-model="userCode" placeholder="请输入短信验证码" pattern="[0-9]*">
          <button @click="sendCode" :disabled="disabled">{{codeMsg}}</button>
        </div>
        <div class="register-pwd">
          <input type="password" placeholder="请输入密码" v-model="userPwd" @change="pwdRules" >
          <input type="password" placeholder="请再次输入密码" v-model="userPwd_again"  @change="pwdRules">
          <h5>{{errMsg}}</h5>
        </div>
        <div class="register-btn" @click="register">注 册</div>
        
    </section>
    <Tabbar></Tabbar>
  </div>
</template>

<script>
import Tabbar from '@/components/common/Tabbar.vue'
import Header from '@/components/login/Header.vue'
//引入弹窗组件
import { Toast } from 'mint-ui';
//引入axios的二次封装
import http from '@/common/api/request.js'
export default {
    name:'Register',
    components:{
        Tabbar,
        Header
    },
    data(){
      return{
        userTel:'',//用户输入手机号
            //验证规则
            rules:{
              //手机号验证
              userTel:{
                rule:/^1\d{10}$/,
                msg:'手机号不能为空,且是11位数字'
              },
              //密码验证 不能为空且6-12位
              userPwd:{
                rule:/^[\w]{6,12}$/,
                msg:'密码不能为空，应为6-12位,不能含有除下划线以外字符'
              },
              userPwd_again:{
                rule:/^[\w]{6,12}$/,
                msg:'密码不能为空，应为6-12位,不能含有除下划线以外字符'
              }
               
            },
            disabled:false,
            //点击获取验证码后的倒计时
            codeNum:6,
            //点击短信验证码后的按钮内容
            codeMsg:'获取短信验证码',
            //存储短信验证码
            code:'',
            //用户输出的短信验证码
            userCode:'',
            //用户首次输入的密码
            userPwd:'',
            //用户第二次输入的密码
            userPwd_again:'',
            //错误显示的信息
            errMsg:'',
            //一切操作无误 成功
            success:false,
            
      }
    },
    methods:{
       //获取短信验证码按钮
       sendCode(){
        //验证
        if(!this.validate('userTel'))return
        //请求获取短信验证码接口
        http.$axios({
          url:'/api/code',
          method:'POST',
          // 给后端传递的数据
          data:{
            phone:this.userTel
          }
        }).then(res=>{
          if(res.success){
            this.code = res.data
          }
          console.log(res)
        })
        //禁用按钮
        this.disabled=true
        //倒计时
        let timer = setInterval(()=>{
         this.codeNum--
         this.codeMsg= '重新发送还剩'+this.codeNum+'秒'
        },1000)
        //判断什么时候停止定时器
        setTimeout(()=>{
          clearInterval(timer)
          this.codeNum =6
          this.codeMsg='获取短信验证码'
          this.disabled= false
        },6000)

      },
      validate(key){
        let bool = true
        //如果验证手机号为错误格式
        if(!this.rules[key].rule.test(this[key])){
           //提示信息
           Toast(this.rules[key].msg);
            bool = false
            return false
        }
        return bool
      },
      
      //输入框失去焦点判断密码是否符合规则
      pwdRules(){
        //输入的密码符合格式
        if(!this.validatePwd('userPwd')) return 
        if(!this.validatePwd('userPwd_again')) return 
        
      },
      //前端判断密码格式
      validatePwd(key){
        let bool = true
        //如果验证密码为错误格式
        if(!this.rules[key].rule.test(this[key])){
           //提示信息
           this.errMsg = this.rules[key].msg
          bool =false
          return false
        }else{
          this.errMsg = ''
        }
        return bool
      },
      register(){
        //判断用户密码是否正确 
        if(this.userPwd!=='' &&this.userPwd_again!==''){
          if(this.userPwd == this.userPwd_again &&this.userPwd !==''){
              if(this.code == this.userCode&&this.userCode !==''){
                //所有判断正确 调接口
                  http.$axios({
                  method:'POST',
                  url:'/api/register',
                  data:{
                    phone:this.userTel,
                    userPwd:this.userPwd
                  }
                }).then(res =>{
                  console.log(res)
                })
                
              }else{
                Toast('短信验证码错误')
              }
            }else{
                this.errMsg = '用户输入的两次密码不相同'
            }
          }
        
      }
      
    }
}
</script>

<style lang="less" scoped>
@rootsize:37.5rem;
section{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: (20 / @rootsize) 0;
  font-size: (14 / @rootsize);
  input{
    line-height: (44 / @rootsize);
    height: ( 44 / @rootsize);
    background-color: #fff;
    padding: 0 (20 / @rootsize);
  }
  .register-tel{
    padding: (15 / @rootsize) 0;
    width: (335 / @rootsize);
    input{
      width: 100%;
      border: 1px solid #ccc;
    }
  }
  .register-message{
    display: flex;
    margin: (15 / @rootsize) 0;
    width: (335 / @rootsize);
    
    input{
      flex: 1;
      border: 1px solid #ccc;
      
    }
    button{
      margin-left: (5 / @rootsize);
      width: (120 / @rootsize);
      background-color: #b0352f;
      color: #fff;
      border: none;
      border-radius: 5px;
    }
  }
  .register-pwd{
    padding: (15 / @rootsize) 0;
    width: (335 / @rootsize);
    input{
      width: 100%;
      border: 1px solid #ccc;
    }
    input:nth-child(2){
      margin-top:(20 / @rootsize) ;
    }
    h5{
      display: inline-block;
      height: (12 / @rootsize);
      padding: 0  (5 / @rootsize) ;
      color: #b0352f;
      font-size: (12 / @rootsize);
      font-weight: 400;
    }
  }
  .register-btn{
    width: (335 / @rootsize);
    line-height: (44 / @rootsize);
    color: #fff;
    background-color: #b0352f;
    border-radius: 5px;
    text-align: center;
    font-size: (18 / @rootsize);
  }
  
}
//背景颜色
section::before{
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #f5f5f5;
  z-index: -1;
}
</style>